<gm:page title="Зеленият Пловдив" css="/css/g.css" class="googleTheme" onload="prepareMap()">

    <!--
       The mashup application shows a list of interesting places in Plovdiv and 
       navigates the map on clicking an item from the list.
       @author: igardev
    -->


  <div class="gm-app-header">
    <b>Зеленият Пловдив</b>
  </div>

  <table width="900">
    <tr valign="top">
      <td width="300">
         
        <gm:list id="myList" data="http://www.bgprop.info/mashups/plovdivmashup13.xml" pagesize="10">
          <gm:handleEvent src="myMap" event="select" execute="zoomLocation()"/>
        </gm:list>        

<br/>
  

</td>
      <td class="mainPanel">
        <gm:map id="myMap" zoom="7" height="500px" data="${myList}" latref="geo:lat" lngref="geo:long" infotemplate="detailTemplate" maptypes="true">
          <gm:handleEvent src="myList" event="select" />
        </gm:map>
      </td>
    </tr>    
  </table>
  
  
 <gm:template id="detailTemplate">
    <div repeat="true">
      <b><gm:text ref="atom:title"/></b><br/>    
      <gm:image ref="atom:pictureurl" width="150"/><br/>
      <gm:link label="Повече детайли" ref="atom:objecturl"/>    
    </div>
  </gm:template>  
<script>
  var map = null;
  function prepareMap() {   
    
    map = google.mashups.getObjectById("myMap").getMap();   
    map.setMapType(G_SATELLITE_MAP);
    
    map.enableDoubleClickZoom();
    map.GOverviewMapControl();
    
  }
function zoomLocation()
{
    map.setZoom(16);
}
</script>
</gm:page>
